<template>
    <div>
        <!--滚动-->
        <div class="random-img">
            <el-carousel :interval="4000" type="card"  height="360px" class="carousel_clazz">
                <el-carousel-item v-for="item in roll_img" :key="item.index">
                    <img :src=ServeUrl+item.goodsPicturepaths[0].gpPicpath class="rotation" @click="gotoDetails(item)">
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="active-goods">
            <div class="active_clazz">
                <div class="left_btn">
                    <i class="el-icon-back" @click="pageDown"></i>
                </div>
                <div class="promo-pro-text">
                    <div class="wrap">
                        <span class="promo-label">活动</span>
                        <p style="width: 20px;height: 50px"></p>
                        <h1>喜迎新年</h1>
                        <p style="width: 20px;height: 10px"></p>
                        <h1>2020</h1>
                        <p style="width: 20px;height: 10px"></p>
                        <h2>活动商品 <br />限时7折</h2>
                        <p style="width: 20px;height: 40px"></p>
                        <el-button type="text" class="button">查看详情</el-button>
                    </div>
                </div>
                <div class="goodsArea" v-for="(goods) in activeGoods">
                    <GoodsCardSize v-if="goods" :goods="goods" @click.native="gotoDetails(goods)"></GoodsCardSize>
                    <span v-else>商品未上架</span>
                </div>
                <div class="right_btn">
                    <i class="el-icon-right"  @click="pageUp"></i>
                </div>
            </div>
        </div>

        <el-container>
            <el-header>本周热卖</el-header>
            <el-container>
                <el-container>
                    <el-main>
                        <GoodsCard
                                v-for='(item) in HotWeek'
                                :key="item.index"
                                :goodsname="item.goodsname"
                                :goodsprice="item.goodsprice"
                                :goodsdiscount="item.goodsdiscount"
                                :goodpic="item.goodsPicturepaths[0].gpPicpath"
                                @click.native="gotoDetails(item)"
                                class="new-goods"
                        ></GoodsCard>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>

        <el-container>
            <el-header>精品推荐</el-header>
            <el-container>
                <el-container>
                    <el-main>
                        <GoodsCard
                                v-for='(item) in QualityreCommendation'
                                :key="item.index"
                                :goodsname="item.goodsname"
                                :goodsprice="item.goodsprice"
                                :goodpic="item.goodsPicturepaths[0].gpPicpath"
                                :goodid="item.goodsid"
                                :goodsdiscount="item.goodsdiscount"
                                @click.native="gotoDetails(item)"
                                class="new-goods"></GoodsCard>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>

        <el-container>
            <el-header>潮流搭配</el-header>
            <el-container>
                <el-container>
                    <el-main>
                        <GoodsCard
                                v-for='(item) in FashionCollocation'
                                :key="item.index"
                                :goodsname="item.goodsname"
                                :goodsprice="item.goodsprice"
                                :goodpic="item.goodsPicturepaths[0].gpPicpath"
                                :goodsdiscount="item.goodsdiscount"
                                @click.native="gotoDetails(item)"
                                class="new-goods"></GoodsCard>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>

        <el-container>
            <foot></foot>
        </el-container>
    </div>
</template>


<script>
    import GoodsCard from "../../components/GoodsCard";
    export default {
        data() {
            return {
                hotGoodsCardCount:[0,1,2],
                ServeUrl:this.$store.state.beginUrl,
                activeIndex: '1',
                activeIndex2: '1',
                roll_img:[],
                ActiveCommodities:[],
                /*活动商品展示*/
                activeGoods:[],
                HotWeek:[],
                QualityreCommendation:[],
                FashionCollocation:[],
            };
        },
        mounted(){
            this.$axios.get("/goods/queryshopmain?label=活动商品").then(ret=>{
                ret.data.forEach(data=>{
                    this.ActiveCommodities.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                });
                this.instoreData();
                this.getActiveGoods();
            })
            this.$axios.get("/goods/queryshopmain?label=本周热卖").then(ret=>{
                ret.data.forEach(data=>{
                    this.HotWeek.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            });
            this.$axios.get("/goods/queryshopmain?label=精品推荐").then(ret=>{
                ret.data.forEach(data=>{
                    this.QualityreCommendation.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            });
            this.$axios.get("/goods/queryshopmain?label=潮流搭配").then(ret=>{
                ret.data.forEach(data=>{
                    this.FashionCollocation.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            });
            this.$axios.get("/goods/queryshopmain?label=首页轮播图").then(ret=>{
                ret.data.forEach(data=>{
                    this.roll_img.push({
                        goodsid:data.goodsid,
                        goodsname:data.goodsname,
                        goodsprice:data.goodsprice,
                        goodsbrand:data.goodsbrand,
                        goodsdiscount:data.goodsdiscount,
                        goodsPicturepaths:data.goodsPicturepaths
                    })
                })
            });
            this.updateData();
        },

        methods: {
            getGoodsInfo(){
                this.$axios.get("/goods/queryshopmain?label=活动商品").then(ret=>{
                    this.ActiveCommodities = ret.data;
                    this.instoreData();
                    this.getActiveGoods();
                })
                this.$axios.get("/goods/queryshopmain?label=本周热卖").then(ret=>{
                    this.HotWeek = ret.data;
                });
                this.$axios.get("/goods/queryshopmain?label=精品推荐").then(ret=>{
                    this.QualityreCommendation = ret.data;
                });
                this.$axios.get("/goods/queryshopmain?label=潮流搭配").then(ret=>{
                    this.FashionCollocation = ret.data;
                });
                this.$axios.get("/goods/queryshopmain?label=首页轮播图").then(ret=>{
                    this.roll_img = ret.data;
                })
            },
            updateData(){
                var val = 1;
                window.setInterval(()=>{
                    console.log(val++);
                    setTimeout(this.getGoodsInfo,0);
                },8000)
            },
            instoreData(){
                this.$store.commit("getActiveGoodsList",this.ActiveCommodities)
            },
            handleSelect(key, keyPath) {
            },
            gotoDetails:function(item){
                console.log(item);
                this.$store.commit('updateshopdetail',item)
                this.$router.push({name:"Details",params:{goods:item}})
            },
            getActiveGoods(){
                this.activeGoods.length = 0;
                let goodsList = this.$store.state.activeGoodsList;
                for (let i = 0; i < this.hotGoodsCardCount.length ; i++) {
                    this.activeGoods.push(goodsList[this.hotGoodsCardCount[i]]);
                }
            },
            pageUp(){
                console.log(5);
               let length = this.ActiveCommodities.length;
               let indexUp = this.hotGoodsCardCount.length;
                for (let i = 0; i < indexUp ; i++) {
                    this.hotGoodsCardCount[i] -=1;
                    if (this.hotGoodsCardCount[i] < 0){
                        this.hotGoodsCardCount[i] = length - 1;
                    }
                }
                console.log(this.hotGoodsCardCount);
                this.getActiveGoods();
                console.log(this.activeGoods);
            },
            pageDown(){
                let length = this.ActiveCommodities.length;
                let indexUp = this.hotGoodsCardCount.length;
                console.log(length);
                for (let i = 0; i <indexUp ; i++) {
                    this.hotGoodsCardCount[i] += 1;
                    if (this.hotGoodsCardCount[i] >= length){
                        this.hotGoodsCardCount[i] = 0;
                    }
                }
                console.log(this.hotGoodsCardCount);
                this.getActiveGoods();
                console.log(this.activeGoods);
            },

        },
        components:{
            "GoodsCard":GoodsCard,
            GoodsCardSize,
        }
    }
    import GoodsCardSize from "../../components/GoodsCardSize";
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .random-img{
        width: 100%;
        height: 400px;
        padding: 40px;
        margin: auto;
        background-color: rgb(244,229,222);
        /*outline: 1px solid red;*/
    }
    .carousel_clazz{
        /*border: 1px solid red;*/
        width: 90%;
    }
    .rotation{
        height: 100%;
        width: 100%;
        background-size: cover;
        margin-top: 30px;
        background-repeat:no-repeat;
    }
    .borderLine{
        outline: 1px solid red;
    }
    .active-goods{
        height: 380px;
        /*outline: 1px solid red;*/
        background-color: rgb(239,239,239);
        padding: 100px;
    }
    .active_clazz{
        /*outline: 1px solid red;*/
        height: 380px;
        width: 1530px;
        margin: 0 auto;
        overflow: hidden;
        /*background-color: rgb(247,247,247);*/
    }
    .el-carousel{
        position: relative;
        width: 75vw;
        margin-left: 10vw;
    }
    .left_btn,.right_btn{
        text-align: center;
        float: left;
        height: 380px;
        width: 80px;
        color: rgb(155,155,156);
        font-size: 50px;
        font-weight: bold;
        line-height: 380px;
        background-color: rgb(239,239,239);
        /*outline: 1px solid red;*/
    }
    .right_btn>i:hover,.left_btn>i:hover{
        color: rgb(226,33,75);
    }
    .promo-pro-text{
        float: left;
        background-color: rgb(224,57,57);
        height: 380px;
        width: 272px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .goodsArea{
        float: left;
        /*outline: 1px solid red;*/
        /*background-color: rgb(224,57,57);*/
        height: 380px;
        width: 272px;
    }
    .wrap{
        /*margin-left: 25px;*/
        margin-top: 30px;
        /*outline: 1px solid #492eff;*/
        width: 250px;
        height: 310px;
        text-align: left;
    }
    .promo-label {
        /*outline: 1px solid #5cff72;*/
        background: rgb(255, 222, 0);
        padding: 4px 13px;
        line-height: 22px;
        font-size: 16px;
        color: rgba(220, 0, 0, 0.76);
        /*float: left;*/
        font-weight: bold;
        border-radius: 2px;
        /*height: 60px;*/
        margin:20px 130px 20px 20px;
    }
    .promo-pro-text> .wrap>h1 {
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        text-align:left;
        line-height: 30px;
        margin-left: 20px;
        }
    .promo-pro-text >.wrap >h2 {
        font-size: 18px;
        line-height: 20px;
        color: #ffffff;
        font-weight: bold;
        text-align:left;
        margin-left: 20px;
        margin-bottom: 50px;
    }
    .promo-pro-text .wrap .el-button {
        color: #fff;
        border: 2px solid #fff;
        text-transform: uppercase;
        line-height: 30px;
        float: left;
        padding: 0 25px;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .promo-pro-text .wrap a:hover {
        background: #fff;
        color: #3bb185;
    }
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .el-main{
        padding: 0px;
        height: 500px;
    }
    .el-card__body{
        margin: 0;
        padding: 0;
    }
    .el-card>div:first-child{
        line-height: 30px;
        padding: 0;
        text-align: left;
    }
    .el-header{
        font-weight: 800;
        font-size: 26px;
        background-color: #272727;
        color: white;
        line-height: 2em;
        text-align: center;
    }

    .active{
        overflow-x: hidden;
    }
    .card{
        margin: 85px 0 30px 0;
    }
    .el-aside{
        margin: 85px 0 30px 0;
    }
    .el-container>.el-container>.el-container>.el-main>.card{
        margin-right: 2vw;
    }
    .el-container>.el-container>.el-container>.el-main{
        margin-left: 5vw;
    }
    .el-container>.el-container>.el-container{
        margin-left: 3vw;
    }
    .new-goods{
        margin-left: 20px;
        box-shadow: 0 0 15px #9e9e9e;
        transition: 0.3s;
    }
    .new-goods:hover{
        transition: 0.3s;
        transform: scale(1.1);
    }
</style>
